/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useCallback, useEffect, useState } from 'react';
import { Row, Col, Typography } from 'antd';
import { connect } from 'dva';
import { Yzs } from '@/components/Select';
import { getLStorage } from '@/utils/utils';
import WrapperCharts from './components/WrapperCharts';
import styles from './style.less';

const { Title: AntTitle } = Typography;

const Title = ({ children, className }) => <div className={className}>{children}</div>;

const Statistics = ({
  dispatch,
  inOutNumber,
  sendAndRate,
  stationAndFans,
  inNumRank,
  outRateRank,
  router,
  dataLoading,
  listLoading,
}) => {
  const [cm_id, setStation] = useState('all');
  const [hasAuth, setAuth] = useState(false);
  const [yzReqPayload, setYzReqPayload] = useState({});

  const onStationSelect = useCallback(option => {
    setStation(option);
  }, []);

  useEffect(
    () => {
      const { unique_id } = router.location.query;
      const data = getLStorage(unique_id);
      if (data) {
        setAuth(true);
        setYzReqPayload({
          unique_id,
          _token: data,
          area_id: '',
        });
        dispatch({
          type: 'list/yesterdaData',
          payload: {
            cm_id,
            unique_id,
            _token: data,
            area_id: '',
          },
        });
        dispatch({
          type: 'list/regionalRanking',
          payload: {
            pageSize: 10,
            type: 'in',
            cm_id,
            unique_id,
            _token: data,
            area_id: '',
          },
        });
        dispatch({
          type: 'list/regionalRanking',
          payload: {
            pageSize: 10,
            type: 'out_rate',
            cm_id,
            unique_id,
            _token: data,
            area_id: '',
          },
        });
      } else {
        setAuth(false);
      }
    },
    [router, cm_id, dispatch],
  );

  if (!hasAuth) {
    return <AntTitle className={styles.noAuth}>暂无权限</AntTitle>;
  }

  return (
    <div>
      <Title className={styles.stationWrapper}>
        站点：
        <Yzs value={cm_id} onSelect={onStationSelect} reqPayload={yzReqPayload} />
      </Title>
      <Title className={styles.title}>昨日数据总览</Title>
      <Row>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            name="inOutNumber"
            chartType="overview"
            chartData={inOutNumber}
            className={styles.card}
            loading={dataLoading}
          />
        </Col>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            name="sendAndRate"
            chartType="overview"
            chartData={sendAndRate}
            className={styles.card}
            loading={dataLoading}
          />
        </Col>
        {cm_id == 'all' && (
          <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
            <WrapperCharts
              name="stationAndFans"
              chartType="overview"
              chartData={stationAndFans}
              className={styles.card}
              loading={dataLoading}
            />
          </Col>
        )}
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            chartType="pies"
            name="storagePic"
            title="入库品牌占比"
            numType="in_num"
            cm_id={cm_id}
            className={styles.card}
          />
        </Col>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            chartType="pies"
            name="outPic"
            title="寄件品牌占比"
            numType="out_num"
            cm_id={cm_id}
            className={styles.card}
          />
        </Col>
        {cm_id == 'all' && (
          <>
            <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
              <WrapperCharts
                name="stationAndFans"
                chartType="overview"
                listData={inNumRank}
                className={styles.card}
                loading={listLoading}
                title="入库排名"
              />
            </Col>
            <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
              <WrapperCharts
                name="stationAndFans"
                chartType="overview"
                listData={outRateRank}
                className={styles.card}
                loading={listLoading}
                title="三日出库率排名"
              />
            </Col>
          </>
        )}
      </Row>
      <Title className={styles.title}>近七天数据对比</Title>
      <Row>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            chartType="chart"
            name="storageSummary"
            title="出入库数"
            numType="out_num"
            fields={['in_num', 'out_num', 'back_num']}
            cm_id={cm_id}
            className={styles.card}
          />
        </Col>
      </Row>
      <Row>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            chartType="chart"
            name="storageRate"
            title="出库率"
            fields={['outStorageRate']}
            cm_id={cm_id}
            className={styles.card}
            cols={{
              temperature: {
                type: 'linear',
                min: 0,
                formatter: value => `${value}`,
              },
            }}
          />
        </Col>
      </Row>
      <Row>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            chartType="chart"
            name="complaintRate"
            title="投诉率"
            fields={['complaintRate']}
            cm_id={cm_id}
            className={styles.card}
            cols={{
              temperature: {
                type: 'linear',
                min: 0,
                formatter: value => `${value}`,
              },
            }}
          />
        </Col>
      </Row>
      <Row>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            chartType="chart"
            name="smsSummary"
            title="短信数"
            fields={['sms_num']}
            cm_id={cm_id}
            className={styles.card}
            cols={{
              temperature: {
                type: 'linear',
                min: 0,
              },
            }}
          />
        </Col>
      </Row>
      <Row>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            chartType="chart"
            name="orderSummary"
            title="寄件订单数"
            fields={['num', 'real_num']}
            cm_id={cm_id}
            className={styles.card}
          />
        </Col>
      </Row>
      {cm_id == 'all' && (
        <Row>
          <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
            <WrapperCharts
              chartType="chart"
              name="fansSummary"
              title="公众号粉丝数"
              fields={['total', 'new_add']}
              cm_id={cm_id}
              className={styles.card}
            />
          </Col>
        </Row>
      )}
      <Row className={styles.tips} gutter={[0, 5]}>
        <Col>如何订阅该消息：</Col>
        <Col>1. 微信关注‘快宝驿站’公众号并绑定手机号；</Col>
        <Col>
          2. 登录快宝智慧快递管理平台网页，在快宝驿站-设置和管理-报表数据推送设置中，添加该手机号。
        </Col>
      </Row>
    </div>
  );
};

export default connect(({ list, router, loading }) => ({
  router,
  inOutNumber: list.inOutNumber,
  sendAndRate: list.sendAndRate,
  stationAndFans: list.stationAndFans,
  inNumRank: list.inNumRank,
  outRateRank: list.outRateRank,
  dataLoading: loading.effects['list/yesterdaData'],
  listLoading: loading.effects['list/regionalRanking'],
}))(React.memo(Statistics));
